<template>
  <div>
    <input type="text" v-model="photoNameSearch" placeholder="请输入图片名称..." @keyup.enter="searchByName">
    <button @click="searchByName">搜索图片名称</button>
    <input type="text" v-model="tagSearch" placeholder="请输入标签..." @keyup.enter="searchByTag" style="margin-left: 10px;">
    <button @click="searchByTag" style="background-color: #81b2ac; color: white;">搜索标签</button>
    <h1>图片列表</h1>
    <table>
      <thead>
        <tr>
          <th>图片ID</th>
          <th>图片信息</th>
          <th>标记状态</th>
          <th>标签</th>
          <th>拍摄时间</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="image in paginatedImages" :key="image.id">
          <td>{{ image.id }}</td>
          <td>{{ image.photoName }}</td>
          <td>{{ getStatusText(image.status) }}</td>
          <td>{{ image.name }}</td>
          <td>{{ formatTime(image.create_time) }}</td>
          <td>{{ image.description || '无' }}</td>
          <td>
            <button @click="showEditModal(image)" class="btn btn-sm btn-primary">修改描述</button>
            <button @click="showDetails(image)" class="btn btn-sm btn-primary">查看</button>
          </td>
        </tr>
      </tbody>
    </table>
  <!-- 分页组件 -->
  <el-pagination
      v-if="images.length > 0"
      style="margin-top: 20px;"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="images.length"
      @current-change="handlePageChange">
    </el-pagination>
    <!-- 修改描述模态框 -->
    <div id="editDescriptionModal" class="modal" v-if="isModalVisible && currentModalType === 'edit'">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h5>修改描述</h5>
        <textarea v-model="currentImage.description" rows="9" placeholder="请输入新的描述" style="width: 97%;"></textarea>
        <div class="modal-footer">
          <button @click="closeModal" class="btn btn-secondary">取消</button>
          <button @click="updateDescription" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>

    <!-- 查看图片模态框 -->
    <div id="detailsModal" class="modal" v-if="isModalVisible && currentModalType === 'details'">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <img v-if="imageUrl" :src="imageUrl" alt="图片" style="max-width: 100%; max-height: 600px; margin-top: 10px;">
        <div class="modal-footer">
          <button @click="closeModal" class="btn btn-secondary">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';

export default {
  data() {
    return {
      urls: {
        getAll: '/medical/lable/getAll',
        searchByPhotoName: '/medical/lable/searchByPhotoName',
        searchByTagName: '/medical/lable/searchByTagName',
        updateDescription: '/medical/lable/updateDescription',
        getPrivateURL: '/medical/lable/getPrivateURL' // 添加获取私有图片URL的API
      },
      images: [],
      photoNameSearch: '',
      tagSearch: '',
      isModalVisible: false,
      currentModalType: '', // 新增一个变量来标识当前模态框类型
      currentImage: {},
      imageUrl: '' ,// 存储图片URL,
      currentPage: 1, // 当前页码
      pageSize: 15 // 每页显示的条数
    };
  },
  created() {
    this.fetchImages();
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    async fetchImages() {
      try {
        const response = await axios.get(`${this.URLhost}${this.urls.getAll}`, {
            params: { tagType: 'palm'}
          });
        const result = response.data;

        if (result.code === 0 && result.data.code === 0) {
          this.images = result.data.data;
        } else {
          console.error('获取图片列表失败:', result.msg || result.data.msg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
    async searchByName() {
      if (this.photoNameSearch.trim()) {
        try {
          const response = await axios.get(`${this.URLhost}${this.urls.searchByPhotoName}`, {
            params: { photoName: this.photoNameSearch ,tagType: 'palm'}
          });
          const result = response.data;

          if (result.code === 0 && result.data.code === 0) {
            this.images = result.data.data;
          } else {
            console.error('搜索图片名称失败:', result.msg || result.data.msg);
          }
        } catch (error) {
          console.error('请求失败:', error);
        }
      } else {
        this.fetchImages();
      }
    },
    async searchByTag() {
      if (this.tagSearch.trim()) {
        try {
          const response = await axios.get(`${this.URLhost}${this.urls.searchByTagName}`, {
            params: { name: this.tagSearch ,tagType: 'palm'}
          });
          const result = response.data;

          if (result.code === 0 && result.data.code === 0) {
            this.images = result.data.data;
          } else {
            console.error('搜索标签失败:', result.msg || result.data.msg);
          }
        } catch (error) {
          console.error('请求失败:', error);
        }
      } else {
        this.fetchImages();
      }
    },

    
    async showDetails(image) {
      this.imageUrl = ''; // 清空图片地址
      try {
        const response = await axios.get(`${this.URLhost}${this.urls.getPrivateURL}`, {
          params: { photoName: image.photoName ,tagType: 'palm'}
        });
        this.imageUrl = response.data.data;
      } catch (error) {
        console.error('获取图片地址失败:', error);
      }
      this.currentModalType = 'details'; // 设置当前模态框类型为详情
      this.isModalVisible = true;
    },


    getStatusText(status) {
      return status === 0 ? '未标记' : '已标记';
    },
    formatTime(time) {
      return time ? moment(time).format('YYYY-MM-DD HH:mm:ss') : '';
    },
    showEditModal(image) {
      this.currentImage = { ...image };
      this.currentModalType = 'edit'; // 设置当前模态框类型为编辑
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
      this.currentModalType = ''; // 关闭模态框时清空类型
    },
    async updateDescription() {
      try {
        const response = await axios.post(`${this.URLhost}${this.urls.updateDescription}`, null, {
          params: {
            tagType: 'palm',
            id: this.currentImage.id,
            description: this.currentImage.description
          }
        });
        const result = response.data;

        if (result.code === 0 && result.data.code === 0) {
          this.fetchImages();
          this.closeModal();
        } else {
          console.error('更新描述失败:', result.msg || result.data.msg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  },
  computed: {
    paginatedImages() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.images.slice(start, end);
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

th,
td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #81b2ac;
  color: white;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #eef7ff;
  cursor: pointer;
}

input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #81b2ac;
  color: white;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #6c9a94;
}

.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

th:nth-of-type(1),
td:nth-of-type(1) {
  width: 7%;
}

th:nth-of-type(2),
td:nth-of-type(2) {
  width: 23%;
}

th:nth-of-type(3),
td:nth-of-type(3) {
  width: 10%;
}

th:nth-of-type(4),
td:nth-of-type(4) {
  width: 15%;
}

th:nth-of-type(5),
td:nth-of-type(5) {
  width: 15%;
}

th:nth-of-type(6),
td:nth-of-type(6) {
  width: 20%;
}

th:nth-of-type(7),
td:nth-of-type(7) {
  width: 10%;
}

@media (max-width: 768px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0 0 1rem 0;
  }

  tr:nth-child(odd) {
    background: none;
  }

  tr td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  tr td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  tr td:nth-of-type(1):before {
    content: "图片ID";
  }

  tr td:nth-of-type(2):before {
    content: "图片信息";
  }

  tr td:nth-of-type(3):before {
    content: "标记状态";
  }

  tr td:nth-of-type(4):before {
    content: "标签";
  }

  tr td:nth-of-type(5):before {
    content: "拍摄时间";
  }

  tr td:nth-of-type(6):before {
    content: "描述";
  }

  tr td:nth-of-type(7):before {
    content: "操作";
  }
}
</style>